<template>
  <div class="renting-layout">
    <div class="renting-card-banner" style="position: relative;">
      <!-- <img src="http://qiniu.prod.fita-club.com/web/renting-banner.jpg" alt="" style="display: block; width: 100%;"> -->
      <div class="box-width container">
        <form class="renting-car-form">
          <div class="title">海外自驾 · 从飛騰會开始</div>
          <div class="row form-group">
            <div class="col-6">
              <div class="input-layout align-items-center row no-gutters has-arrow">
                <label class="col-auto">国家:</label>
                <div class="col">
                  <input id="countryEle" style="width: 100%; line-height: 42px; background: transparent;" @click="countryShow=true" v-model="selectedCountryName">
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center row no-gutters has-arrow">
                <label class="col-auto">品牌:</label>
                <div class="col">
                  <v-select id="brandEle"
                    :clearable="false"
                    :options="suppliers"
                    :noDrop="supplierDrop"
                    label="chinese_name"
                    @search:focus="onSearchBrand"
                    @search:blur='generateBrand'
                    v-model="selectedsupplier"
                  ></v-select>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center row no-gutters has-arrow">
                <label class="col-auto">取车:</label>
                <div class="col">
                  <input id="pickupSiteEle" style="width: 100%; line-height: 42px; background: transparent;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden"
                    @click="hotCitiesShow('pickup')" v-model="selectedCityName">
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center row no-gutters has-arrow">
               <label class="col-auto">还车:</label>
                <div class="col">
                  <input id="returnSiteEle" style="width: 100%; line-height: 42px; background: transparent;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;"
                    @click="hotCitiesShow('return')" v-model="returnCityName">
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center row no-gutters has-arrow">
                <div class="col">
                <v-select id="typeEle" :options="typeOptions" label="payName" :reduce="payName => payName.payCode" :noDrop="typeDrop" @search:focus="onSearchType" placeholder="请选择付款方式" v-model="selectedType" ref="typeSelect" ></v-select>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center row no-gutters has-arrow">
                <div class="col">
                  <v-select id="categoriesEle"
                    :options="setCategories"
                    :reduce="chinese_name => chinese_name.id"
                    label="chinese_name"
                    :noDrop="categoriesDrop"
                    @search:focus="onSearchCategories"
                    @search:blur="onSearchCategories"
                    placeholder="请选择套餐"
                    v-model="selectCategories"
                    ref="categorySelect"
                  ></v-select>
                </div>
              </div>
            </div>
            <div class="col-6 has-right-arrow">
              <div class="input-layout align-items-center" style="height: auto !important;">
                <!-- <flat-pickr
                  class="form-control datetimepickr"
                  :config="config"
                  v-model="pickupDate"
                  @on-close="doSomethingOnClose('pickup')"
                ></flat-pickr> -->
                <div style="border-bottom: 1px solid #a1781e; position: relative;" class="has-arrow">
                  <!-- <input type="text" name="" v-model="pickupDateText" class="form-control date"> -->
                  <calendar
                    v-model="pickupDate"
                    show-date-only
                    :format="format"
                    :pane="2"
                    :clear-button="clear"
                    :lang="lang"
                    :range-status="1"
                    :minDate="minDate"
                  ></calendar>
                </div>
                <div class="has-arrow" style="position: relative;">
                  <v-select :options="dateTime" :clearable="false"  v-model="pickupTime"></v-select>
                  <!-- <input type="text" name="" v-model="pickupTimeText"  class="form-control time"> -->
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center" style="height: auto !important;">
                <!-- <flat-pickr
                  class="form-control datetimepickr"
                  :config="config"
                  v-model="returnDate"
                  @on-close="doSomethingOnClose('return')"
                ></flat-pickr> -->
                <div style="border-bottom: 1px solid #a1781e; position: relative;" class="has-arrow">
                  <!-- <input type="text" name="" v-model="returnDateText" class="form-control date"> -->
                  <calendar
                    v-model="returnDate"
                    show-date-only
                    :format="format"
                    :pane="2"
                    :clear-button="clear"
                    :lang="lang"
                    :range-status="2"
                    :minDate="pickupDate"
                  ></calendar>
                </div>
                <div class="has-arrow" style="position: relative;">
                  <v-select :options="dateTime" :clearable="false"  v-model="returnTime"></v-select>
                   <!-- <input type="text" name="" v-model="returnTimeText"  class="form-control time"> -->
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center row no-gutters has-arrow">
                <label class="col-auto">年龄:</label>
                <div class="col">
                  <v-select :options="driverAge" :clearable="false" :reduce="value => value.code" label="value"  v-model="ageSelected"></v-select>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="input-layout align-items-center" style="border: none;">
                <!-- <button type="submit" class="btn ft-btn search-btn">搜索</button> -->
                <a href="javascript:void(0);" data-href="/search-result" @click="goToResult" class="btn ft-btn search-btn" style="line-height: 36px; height: 46px; font-size: 18px;">搜索</a>
              </div>
            </div>
            <b-tooltip :disabled.sync="disabled" ref="tooltip" target="countryEle">
              请先选择国家
            </b-tooltip>
            <b-tooltip :disabled.sync="disabled" ref="tooltip" target="brandEle">
              请先选择品牌
            </b-tooltip>
            <b-tooltip :disabled.sync="disabled" ref="tooltip" target="pickupSiteEle">
              请先选择取车地点
            </b-tooltip>
            <b-tooltip :disabled.sync="disabled" ref="tooltip" target="returnSiteEle">
              请先选择还车地点
            </b-tooltip>
            <b-tooltip :disabled.sync="disabled" ref="tooltip" target="typeEle">
              请先选择支付类型
            </b-tooltip>
          </div>
        </form>
      </div>
    </div>
    <div class="rent-layout box-width container">
      <table class="table table-bordered categories-table">
        <thead>
          <tr>
            <th scope="col">套餐名称</th>
            <th scope="col">不限里程</th>
            <th scope="col">碰撞免责条款（车损险）</th>
            <th scope="col">延伸保险（第三方责任险）</th>
            <th scope="col">中文GPS导航仪</th>
            <th scope="col">燃油政策（赠送第一箱燃油）</th>
            <th scope="col">税金/一般附加费</th>
            <th scope="col">税额外2名驾驶员</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">畅游基本计划</th>
            <td>&radic;</td>
            <td>&radic;</td>
            <td></td>
            <td></td>
            <td></td>
            <td>&radic;</td>
            <td>&radic;</td>
          </tr>
          <tr>
            <th scope="row">无忧自驾计划</th>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
            <td></td>
            <td></td>
            <td>&radic;</td>
            <td>&radic;</td>
          </tr>
          <tr>
            <th scope="row">尊尚自驾计划<small style="display:block;">（最低租赁4天起）</small></th>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
          </tr>
          <tr>
            <th scope="row">增值套餐C</th>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
            <td>&radic;</td>
            <td></td>
            <td>&radic;</td>
            <td>&radic;</td>
          </tr>
        </tbody>
      </table>
      <div class="renting-block-title">
        精选车型 <a href="/login" class="more-btn float-lg-right float-sm-right float-md-right float-mx-right">更多></a>
      </div>
      <div class="clearfix car-type row">
        <div class="col-6 item has-bg-item" style="width: 44%; max-width: 44%; flex: 0 0 44%;">
          <img src="http://qiniu.prod.fita-club.com/web/car-type-1.png" class="car-cover">
          <div class="description">
            <div class="car-title">HYUNDAI ELANTRA<small style="margin-left: 5px;">(或同等车型)</small></div>
            <div class="text">中型轿车/自动档/3行李/5座位/包括空调/4或5门 </div>
            <div class="location"><i class="iconfont icon-location" style="margin-right: 5px;"></i>旧金山</div>
            <div class="price">
              <span class="color-brown">￥389</span>/天起
            </div>
          </div>
          <div class="shade">
            <a href="/login" class="btn ft-btn">查看详情</a>
          </div>
        </div>
        <div class="col-3 item" style="width: 28%; max-width: 28%; flex: 0 0 28%;">
          <img src="http://qiniu.prod.fita-club.com/web/car-type-2.png" class="car-cover">
          <div class="description text-center">
            <div class="car-title">TOYOTA RAV4<small style="margin-left: 5px;">(或同等车型)</small></div>
            <div class="text">中型车/自动档/4行李/5座位/包括空调/2或4门</div>
            <div class="location"><i class="iconfont icon-location" style="margin-right: 5px;"></i>旧金山</div>
            <div class="price">
              <span class="color-brown">￥590</span>/天起
            </div>
          </div>
          <div class="shade">
            <a href="/login" class="btn ft-btn">查看详情</a>
          </div>
        </div>
        <div class="col-3 item" style="width: 28%; max-width: 28%; flex: 0 0 28%;">
          <img src="http://qiniu.prod.fita-club.com/web/car-type-3.png" class="car-cover">
          <div class="description text-center">
            <div class="car-title">FORD MUSTANG<small style="margin-left: 5px;">(或同等车型)</small></div>
            <div class="text">标准/自动档/2行李/4座位/包括空调/2或4门 </div>
            <div class="location"><i class="iconfont icon-location" style="margin-right: 5px;"></i>芝加哥</div>
            <div class="price">
              <span class="color-brown">￥712</span>/天起
            </div>
          </div>
          <div class="shade">
            <a href="/login" class="btn ft-btn">查看详情</a>
          </div>
        </div>
        <div class="col-6 item has-bg-item" style="width: 44%; max-width: 44%; flex: 0 0 44%;">
          <img src="http://qiniu.prod.fita-club.com/web/car-type-4.png" class="car-cover">
          <div class="description">
            <div class="car-title">CADILLAC XTS <small style="margin-left: 5px;">(或同等车型)</small></div>
            <div class="text">豪华轿车/自动档/5行李/5座位/包括空调/4或5门 </div>
            <div class="location"><i class="iconfont icon-location" style="margin-right: 5px;"></i>芝加哥</div>
            <div class="price">
              <span class="color-brown">￥671</span>/天起
            </div>
          </div>
          <div class="shade">
            <a href="/login" class="btn ft-btn">查看详情</a>
          </div>
        </div>
        <div class="col-3 item" style="width: 28%; max-width: 28%; flex: 0 0 28%;">
          <img src="http://qiniu.prod.fita-club.com/web/car-type-5.png" class="car-cover">
          <div class="description text-center">
            <div class="car-title">FORD EXPEDITION<small style="margin-left: 5px;">(或同等车型)</small></div>
            <div class="text">全尺寸SUV/自动档/3行李/7座位/包括空调/2或4门 </div>
            <div class="location"><i class="iconfont icon-location" style="margin-right: 5px;"></i>纽约</div>
            <div class="price">
              <span class="color-brown">￥779</span>/天起
            </div>
          </div>
          <div class="shade">
            <a href="/login" class="btn ft-btn">查看详情</a>
          </div>
        </div>
        <div class="col-3 item" style="width: 28%; max-width: 28%; flex: 0 0 28%;">
          <img src="http://qiniu.prod.fita-club.com/web/car-type-6.png" class="car-cover">
          <div class="description text-center">
            <div class="car-title">CHEVY SUBURBAN<small style="margin-left: 5px;">(或同等车型)</small></div>
            <div class="text">高级车/自动档/7行李/8座位/包括空调/2或4门 </div>
            <div class="location"><i class="iconfont icon-location" style="margin-right: 5px;"></i>纽约</div>
            <div class="price">
              <span class="color-brown">￥819</span>/天起
            </div>
          </div>
          <div class="shade">
            <a href="/login" class="btn ft-btn">查看详情</a>
          </div>
        </div>
      </div>
      <div class="renting-block-title">
        自驾指南
      </div>
      <div class="row guide-layout">
        <div class="col-3">
          <div class="item" @mouseenter="showDescription(1)" @mouseleave="leave()">
          <img src="http://qiniu.prod.fita-club.com/web/guide-1.jpg" class="cover">
            <div class="description text-center ">
              <div class="title">则车必备材料</div>
              <p class="text">护照原件&nbsp;&mdash;&nbsp;有效国际信用卡&nbsp;&mdash;&nbsp;有效中国驾驶证原件&nbsp;&mdash;&nbsp;驾照翻译公证件</p>
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="item" @mouseenter="showDescription(2)" @mouseleave="leave()">
          <img src="http://qiniu.prod.fita-club.com/web/guide-2.jpg" class="cover">
            <div class="description text-center">
              <div class="title">租车前</div>
              <p class="text">登陆各网点了解车型、当期优惠、门店分布、使用要求等。</p>
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="item" @mouseenter="showDescription(3)" @mouseleave="leave()">
          <img src="http://qiniu.prod.fita-club.com/web/guide-3.jpg" class="cover">
            <div class="description text-center">
              <div class="title">取车时</div>
              <p class="text">向柜台出示付款确认单、信用卡和驾照。</p>
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="item" @mouseenter="showDescription(4)" @mouseleave="leave()">
          <img src="http://qiniu.prod.fita-club.com/web/guide-4.jpg" class="cover">
            <div class="description text-center">
              <div class="title">还车时</div>
              <p class="text">严格按照租车协议规定，验车完毕后对验收单拍照留存避免以后发生纠纷。</p>
            </div>
          </div>
        </div>
        <div class="col-12 guide-description">
          <div class="item guide-description-1" :style="{'display':(showT == 1 ? 'block' :'none')}">
            <img src="http://qiniu.prod.fita-club.com/web/guide-item-1.png" style="display: block; width: 100%;">
            <div class="content">
              <div class="title">租车无担忧</div>
              <div class="subtitle">飛騰會为您服务</div>
              <div class="text">
                <img src="http://qiniu.prod.fita-club.com/web/guide-card.png" style="display: block; width: 340px;">
              </div>
            </div>
          </div>
          <div class="item guide-description-2" :style="{'display':(showT == 2 ? 'block' :'none')}">
            <img src="http://qiniu.prod.fita-club.com/web/guide-item-2.png" style="display: block; width: 100%;">
            <div class="content">
              <div class="title">租车无担忧</div>
              <div class="subtitle">飛騰會为您服务</div>
              <div class="text">
                网上预订后可选择在线支付，也可以到门店刷卡支付，<br>在网上预定请收好租车确认单。
              </div>
            </div>
          </div>
          <div class="item guide-description-3" :style="{'display':(showT == 3 ? 'block' :'none')}">
            <img src="http://qiniu.prod.fita-club.com/web/guide-item-3.png" style="display: block; width: 100%;">
            <div class="content">
              <div class="title">租车无担忧</div>
              <div class="subtitle">飛騰會为您服务</div>
              <div class="text">
                领取租赁合约钥匙。领取车时务必检查车况是否与<br>预定的一致出现问题及时像工作人员反馈。
              </div>
            </div>
          </div>
          <div class="item guide-description-4" :style="{'display':(showT == 4 ? 'block' :'none')}">
            <img src="http://qiniu.prod.fita-club.com/web/guide-item-4.png" style="display: block; width: 100%;">
            <div class="content">
              <div class="title">租车无担忧</div>
              <div class="subtitle">飛騰會为您服务</div>
              <div class="text">
                还车后，会收到租车公司从信用卡的划扣费用，一般<br>为违章违规费用，需及时联系租车公司查询。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="renting-block-title">
        用户分享
      </div>
      <div class="user-share">
        <b-carousel
          id="carousel-1"
          v-model="slide"
          :interval="4000"
          controls
          @sliding-start="onSlideStart"
          @sliding-end="onSlideEnd"
        >
          <b-carousel-slide>
            <div class="row">
              <div class="col item">
                <img src="http://qiniu.prod.fita-club.com/web/share-1.png" >
                <div class="comments-layout">
                  <div class="text">飛騰會还是蛮靠谱的，值得信赖</div>
                  <div class="user text-right">-李**</div>
                  <div class="address clearfix">
                    <i class="iconfont icon-location"></i>&nbsp;旧金山&nbsp;&nbsp;
                    <i class="iconfont icon-car"></i>&nbsp;SUV
                    <div class="float-right">
                        2019-02-03
                    </div>
                  </div>
                </div>
              </div>
              <div class="col item">
                <img src="http://qiniu.prod.fita-club.com/web/share-2.png" >
                <div class="comments-layout">
                  <div class="text">选择飛騰會一定没错!车型好而且还是新车，服务也好</div>
                  <div class="user text-right">-李**</div>
                  <div class="address clearfix">
                    <i class="iconfont icon-location"></i>&nbsp;洛杉矶&nbsp;&nbsp;
                    <i class="iconfont icon-car"></i>&nbsp;SUV
                    <div class="float-right">
                        2019-02-03
                    </div>
                  </div>
                </div>
              </div>
              <div class="col item">
                <img src="http://qiniu.prod.fita-club.com/web/share-3.png" >
                <div class="comments-layout">
                  <div class="text">美国租车非常方便，值得信赖</div>
                  <div class="user text-right">-李**</div>
                  <div class="address clearfix">
                    <i class="iconfont icon-location"></i>&nbsp;芝加哥&nbsp;&nbsp;
                    <i class="iconfont icon-car"></i>&nbsp;SUV
                    <div class="float-right">
                        2019-02-03
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </b-carousel-slide>
          <!-- <b-carousel-slide>
            <div class="row">
              <div class="col item">
                <img src="http://qiniu.prod.fita-club.com/web/share-1.png" >
                <div class="comments-layout">
                  <div class="text">飛騰會还是蛮靠谱的，值得信赖</div>
                  <div class="user text-right">-李**</div>
                  <div class="address clearfix">
                    <i class="iconfont icon-location"></i>&nbsp;旧金山&nbsp;&nbsp;
                    <i class="iconfont icon-car"></i>&nbsp;SUV
                    <div class="float-right">
                        2019-02-03
                    </div>
                  </div>
                </div>
              </div>
              <div class="col item">
                <img src="http://qiniu.prod.fita-club.com/web/share-2.png" >
                <div class="comments-layout">
                  <div class="text">选择飛騰會一定没错!车型好而且还是新车，服务也好</div>
                  <div class="user text-right">-李**</div>
                  <div class="address clearfix">
                    <i class="iconfont icon-location"></i>&nbsp;洛杉矶&nbsp;&nbsp;
                    <i class="iconfont icon-car"></i>&nbsp;SUV
                    <div class="float-right">
                        2019-02-03
                    </div>
                  </div>
                </div>
              </div>
              <div class="col item">
                <img src="http://qiniu.prod.fita-club.com/web/share-3.png" >
                <div class="comments-layout">
                  <div class="text">美国租车非常方便，值得信赖</div>
                  <div class="user text-right">-李**</div>
                  <div class="address clearfix">
                    <i class="iconfont icon-location"></i>&nbsp;芝加哥&nbsp;&nbsp;
                    <i class="iconfont icon-car"></i>&nbsp;SUV
                    <div class="float-right">
                        2019-02-03
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </b-carousel-slide> -->
        </b-carousel>
      </div>
      <div class="renting-block-title">
        适用地区及国家
      </div>
      <div class="region-layout row">
        <div class="col-3 item">
          <img src="http://qiniu.prod.fita-club.com/web/region-1.png">
          <div class="circle">北美</div>
        </div>
        <div class="col-3 item">
          <img src="http://qiniu.prod.fita-club.com/web/region-2.png">
          <div class="circle">澳洲</div>
        </div>
        <div class="col-3 item">
          <img src="http://qiniu.prod.fita-club.com/web/region-3.png">
          <div class="circle">中东</div>
        </div>
        <div class="col-3 item">
          <a href="javascript:void(0)" class="alink">美国</a>
          <a href="javascript:void(0)" class="alink">泰国</a>
          <a href="javascript:void(0)" class="alink">捷克</a>
          <a href="javascript:void(0)" class="alink">德国</a>
          <a href="javascript:void(0)" class="alink">西班牙</a>
          <a href="javascript:void(0)" class="alink">希腊</a>
          <a href="javascript:void(0)" class="alink">加拿大</a>
          <a href="javascript:void(0)" class="alink">意大利</a>
          <a href="javascript:void(0)" class="alink">冰岛</a>
          <a href="javascript:void(0)" class="alink">新西兰</a>
          <a href="javascript:void(0)" class="alink">关岛</a>
          <a href="javascript:void(0)" class="alink">奥地利</a>
          <a href="javascript:void(0)" class="alink">法国</a>
          <a href="javascript:void(0)" class="alink">塞班</a>
          <a href="javascript:void(0)" class="alink">巴西</a>
          <a href="javascript:void(0)" class="alink">英国</a>
          <a href="javascript:void(0)" class="alink">瑞士</a>
          <a href="javascript:void(0)" class="alink">挪威</a>
          <a href="javascript:void(0)" class="alink">澳大利亚</a>
          <a href="javascript:void(0)" class="alink">荷兰</a>
          <a href="javascript:void(0)" class="alink">土耳其</a>
        </div>
      </div>
    </div>
    <div class="form-layout renting-car-page">
      <div class="form-box container">
        <div class="row">
          <div class="col-5 counsel-info" style="padding-top: 60px;">
            <!-- <div><span style="font-size: 40px;">创办以来</span>
              <p>好评率近达 <span style="font-size: 40px;">100%</span><br>我们期待为您，<br>量身定制一次温暖的旅行。</p>
            </div> -->
            <div class="qrcode-layout" style="margin-top: 100px;">
              <img src="http://qiniu.prod.fita-club.com/web/counsel.png" class="img-style"/>
              <p class="text-center">免费咨询</p>
              <img src="http://qiniu.prod.fita-club.com/web/qrcode.png" class="qrcode">
            </div>
          </div>
          <div class="col-7 form-contain">
            <p style="font-size: 40px;">只要决定出发</p>
            <p style="font-size: 20px;">剩下的一切，交给洪吉就好。</p>
            <div class="form-group basics-info clearfix">
              <input class="input" name="name" v-model="senderName" placeholder="姓名">
              <input class="input"  name="address" v-model="senderAddress" placeholder="目的地">
              <input class="input"  name="date" v-model="senderDate" placeholder="天数">
            </div>
            <div class="form-group">
              <input class="input"  name="mobile" v-model="senderMobile" placeholder="联系方式">
            </div>
            <textarea name="message" v-model="senderMessage" placeholder="您可以填写：如出行日期、预计经费、是否带小孩以及其它特殊情况申明等。"></textarea>
            <a :href="emailUrl" @click="sendMail" style="width: 150px; display: block; text-align: center; line-height: 36px;" class="ft-btn submit">提交</a>
          </div>
        </div>
      </div>
    </div>
    <b-modal
      id="countryModal"
      centered
      v-model="countryShow"
      size="lg"
      title="选择国家"
      :options="countriesOptions"
      @cancel="resetModal"
      @close="resetModal"
    >
      <div class="cities-list">
        <div class="city-letter" v-b-scrollspy:country-scroller>
          <a :href="'#'+key"
            v-for="(item, key) in countriesOptions"
            :key="item.index" @click="selectCitiesLetter(key)"
            class="item"
            v-bind:class="{ active: key === currentLetter}"
          >{{key}}</a>
        </div>
        <div class="city-box" id="country-scroller">
          <div v-for="(item, index) of countriesOptions" :key="index" class="city-group">
            <div class="letter" :id="index" >{{index}}</div>
            <div class="item"
              v-for="(cityItem, id) in item"
              :key="cityItem.chinese_name"
              :data-country-id="cityItem.id"
              :data-country-code="cityItem.code"
              :data-country-name="cityItem.chinese_name"
              :data-suppliers="cityItem.suppliers"
              :class="{ selected: (index == currentCountryIndex && id == currentCountryId) }"
              @click.stop="bindSelectCountry(index, id, $event)"
            >
              {{cityItem.chinese_name}}
              <small>{{cityItem.english_name}}</small>
            </div>
          </div>
        </div>
      </div>
    </b-modal>
    <b-modal
      ref="city-modal"
      id="city-modal"
      centered
      size="lg"
      title="选择热门城市"
      :options="hotLocations"
    >
      <div class="cities-list" style="padding: 10px 30px 20px;">
        <div class="input-group" style="margin-bottom: 10px;">
          <input
            @focus="hotCityShow=true"
            @blur="hotCityShow= (searchCityVal.length < 1) ? false: true"
            @keyup.enter ="searchCity"
            v-model.trim="searchCityVal"
            type="text"
            class="form-control"
            placeholder=""
            aria-describedby="basic-addon1"
          >
          <div class="input-group-append" @click.stop="searchCity">
            <span class="input-group-text" id="basic-addon1"><i class="iconfont icon-search"></i></span>
          </div>
        </div>

        <div class="city-box" v-if="!hotCityShow && Object.keys(hotLocations).length < 1">
          <div class="">热门城市</div>
          <p class="text-center">无热门城市</p>
        </div>
        <div class="city-box" v-if="!hotCityShow && Object.keys(hotLocations).length >= 1">
          <div class="">热门城市</div>
          <div v-for="(item, index) in hotLocations" :key="index" v-show="true" class="city-group">
            <div class="letter">{{index}}</div>
            <div class="item"
              v-for="(cityItem, id) in item"
              :key="cityItem.name"
              :data-city-code="cityItem.country"
              :data-city-zname="cityItem.chineseCityName"
              :data-city-name="cityItem.name"
              :data-city-id="cityItem.id"
              :class="{ selected: (currentShowModal === 'pickup' ? (id == currentCityId && index == currentCityIndex) : (id == returnCurrentCityId && index == returnCurrentCityIndex)) }"
              @click.stop="bindSelectCity(index, id, $event)"
            >  {{cityItem.chineseCityName}}
              <small>{{cityItem.name}}</small>
            </div>
          </div>
        </div>
        <div class="city-box" v-else-if="hotCityShow && Object.keys(searchCityData).length >= 1">
          <div class="list">
            <div class="item row" v-for="(item, index) in searchCityData" :key="index"
              :data-city-code="item.country"
              :data-city-zname="item.chineseCityName"
              :data-city-name="item.name"
              :data-city-id="item.id"
              :class="{ selected: (index ==  (currentShowModal === 'pickup') ? currentSearchCityIndex : returnCurrentSearchCityIndex) }"
              @click.stop="bindSearchCity(index, $event)"
            >
              <div class="col">
                <div class="city-name">{{item.name}}</div>
                <div class="city-address">{{item.address1}}</div>
                <div class="info">TEL: {{item.phone}}&nbsp;&nbsp;{{item.country}}&nbsp;&nbsp;{{item.cityName}}</div>
              </div>
              <div v-if="item.isAirport" class="col-3 d-flex justify-content-center align-items-center">
                <span class="iconfont icon-airplane"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="city-box" v-else-if="hotCityShow && Object.keys(searchCityData).length < 1">
          <p class="text-center">无搜索结果</p>
        </div>
      </div>
    </b-modal>
    <div class="modal fade in" id="pay-modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="price"><span>￥</span>433.20</div>
            <div class="pay-type">
              <div class=""><input ></div>
            </div>
            <div class="pay-type"></div>
            <div class="pay-type"></div>
            <div class="pay-type"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>
<script src="./renting-car.js"> </script>
<style scoped >
  .datetimepickr {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: initial !important;
    height: 100%;
    opacity: 0 !important;
    z-index: 1;
  }

  .form-control:disabled,
  .form-control[readonly] {
    background: transparent !important;
  }

  .renting-car-form .input-layout {
    height: 44px;
  }

  .renting-car-form .input-layout .col {
    height: 100%;
  }

  .renting-car-form .input-layout >>> .vs__selected {
    color: hsla(35,34%,55%,.8) !important;
  }

  .renting-car-form .input-layout >>>  .datepicker-input {
    height: 44px;
  }
</style>
<style>

  ul.vs__dropdown-menu {
    z-index: 1070 !important;
  }
</style>
